<template>
	<div>
		<Bread>
			<template v-slot:title>
				<el-breadcrumb-item v-for="(item, index) in titleList" :key="index">
					{{ item }}</el-breadcrumb-item
				>
			</template></Bread
		>
		<el-card>
			<!-- 搜索框 -->
			<el-input
				placeholder="搜索内容内容"
				v-model="queryInfo.query"
				class="input-with-select"
				v-on:input="search"
			>
				<el-button
					slot="append"
					icon="el-icon-search"
					class="cursor"
				></el-button>
			</el-input>
			<!-- 数据表格 -->
			<el-table :data="list" stripe style="width: 100%" border>
				<el-table-column type="index" width="50"> </el-table-column>
				<el-table-column prop="order_number" label="订单编号" width="300">
				</el-table-column>
				<el-table-column
					prop="order_price"
					label="订单价格"
					width="80"
				></el-table-column>
				<el-table-column prop="pay_status" label="是否付款" width="100">
					<template v-slot="scope">
						<el-tag type="success" v-if="scope.row.pay_status != '0'"
							>已付款</el-tag
						>
						<el-tag type="danger" v-else>未付款</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					prop="is_send"
					label="是否发货"
					width="80"
				></el-table-column>
				<el-table-column label="下单时间">
					<template v-slot="scope">
						{{ scope.row.update_time | dataFormat }}
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template>
						<div class="btn">
							<el-button
								type="primary"
								icon="el-icon-edit"
								size="medium "
								circle
								@click="revise"
							></el-button>
							<el-button
								type="warning"
								icon="el-icon-location"
								size="medium "
								circle
								@click="showData"
							></el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="queryInfo.pagenum"
				:page-sizes="[5, 10, 20, 50]"
				:page-size="queryInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			>
			</el-pagination>
		</el-card>
		<!-- 修改数据对话框 -->
		<el-dialog
			title="修改地址"
			:visible.sync="dialogVisible"
			width="30%"
			:show-close="false"
			@close="closed"
		>
			<el-form
				:model="ruleForm"
				:rules="rules"
				ref="ruleForm"
				label-width="100px"
				class="demo-ruleForm"
			>
				<el-form-item label="省市区/县" prop="address12">
					<el-cascader
						v-model="ruleForm.address1"
						:options="cityData"
						:props="{ expandTrigger: 'hover' }"
					></el-cascader>
				</el-form-item>
				<el-form-item label="详细地址" prop="address2">
					<el-input v-model="ruleForm.address2" class="inputs"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibles">取 消</el-button>
				<el-button type="primary" @click="dialogVisibled">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 展示物流进度 -->
		<el-dialog
			title="物流进度"
			:visible.sync="dialogVisibless"
			width="30%"
			:show-close="false"
			@close="closeds"
		>
			<el-form
				:model="ruleForm"
				:rules="rules"
				ref="ruleForms"
				label-width="100px"
				class="demo-ruleForm"
			>
				<span>暂无物流，请稍后查看</span>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisiblesss">取 消</el-button>
				<el-button type="primary" @click="dialogVisibleds">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import city from '../../../public/js/citydata'
import Bread from '../../components/Bread.vue'
export default {
	name: 'Orders',
	components: {
		Bread,
	},
	data() {
		return {
			titleList: ['订单管理', '订单列表'],
			queryInfo: {
				query: '',
				pagenum: 1,
				pagesize: 5,
			},
			list: [],
			total: 0,
			dialogVisible: false,
			ruleForm: {
				address2: '',
				address1: [],
			},
			rules: {
				address2: [{ required: true, message: '不能为空', trigger: 'blur' }],
				address1: [{ required: true, message: '不能为空', trigger: 'blur' }],
			},
			cityData: city,
			dialogVisibless: false,
			showDataList: [],
		}
	},
	methods: {
		// 物流对话框确定按钮
		dialogVisibleds() {
			this.dialogVisibless = false
		},
		// 物流对话框取消按钮
		dialogVisiblesss() {
			this.dialogVisibless = false
		},
		// 修改地址对话框关闭事件
		closeds() {
			this.$refs.ruleForms.resetFields()
		},
		// 物流显示事件
		showData() {
			// this.$http.get('/kuaidi/1106975712662')
			// .then(res => {
			//     let {data,meta} = res.data
			//     console.log(meta)
			//     console.log(data)

			//     if(meta.status != 200){
			//         this.$message.error(meta.message)
			//         return
			//     }
			//       this.showDataList = data

			// })
			// .catch(err => {
			//     console.log(err.message)

			// })
			this.dialogVisibless = true
		},
		// 修改地址对话框关闭事件
		closed() {
			this.$refs.ruleForm.resetFields()
			this.ruleForm.address1 = []
		},
		//表格修改按钮
		revise() {
			this.dialogVisible = true
		},
		// 修改对话框确定按钮
		dialogVisibled() {
			this.dialogVisible = false
		},
		// 修改对话框取消按钮
		dialogVisibles() {
			this.dialogVisible = false
		},
		// 搜索框功能
		search() {
			this.getData()
		},
		// 当前第几页
		handleCurrentChange(v) {
			this.queryInfo.pagenum = v
			this.getData()
		},
		// 每页多少条
		handleSizeChange(v) {
			this.queryInfo.pagesize = v
			this.getData()
		},
		// 获取订单数据列表
		getData() {
			this.$http
				.get('/orders', {
					params: this.queryInfo,
				})
				.then(res => {                   
					let { data, meta } = res.data
					if (meta.status != 200) {
						this.$message.error(meta.msg)
					}
					this.list = data.goods
					this.total = data.total
				})
				.catch(err => {
					console.log(err.message)
				})
		},
	},
	created() {
		this.getData()
	},
}
</script>

<style scoped>
.cursor {
	cursor: default;
}
.input-with-select {
	width: 35%;
	margin-bottom: 15px;
}
.el-card {
	text-align: left;
}
.el-table {
	margin-bottom: 15px;
}
.el-cascader {
	width: 100%;
}
</style>
